<template>
  <view>
    <div>当前环境：{{ NODE_ENV }}</div>
    首页
    <button @click="onSearch">前往搜索页面</button>
    海报生成：
    <view>注意：图片链接必须在downloadFile域名中</view>
    <painter
      @imgOK="onImgOk"
      @imgErr="onImgErr"
      widthPixels="750"
      customStyle="position: absolute; left: -9999rpx;"
      :palette="template"
    />
    <image :src="tempFilePath" mode="widthFix" />
    <button v-if="tempFilePath" @click="savePoster">保存海报</button>
  </view>
</template>

<script>
import env from "@r/config/env.js";
import { dataStatistics } from "@r/utils/monitor.js";
import Crypt from "@r/utils/crypto.js";
import { savePhoneAlbum } from "@r/utils/canvasUtil.js";

export default {
  data() {
    return {
      NODE_ENV: env.NODE_ENV,
      pageTitle: "test", // monitor 的title使用
      template: {
        width: "654px",
        height: "1000px",
        background: "#FEF8F3",
        views: [
          {
            type: "qrcode",
            content: "哈哈哈",
            css: {
              color: "#000000",
              background: "#ffffff",
              width: "200px",
              height: "200px",
              top: "779px",
              left: "29px",
              rotate: "0",
              borderRadius: "10px",
            },
          },
          {
            type: "text",
            text: "扫码关注",
            css: {
              color: "#ff0000",
              background: "rgba(0,0,0,0)",
              width: "200px",
              height: "43.89999999999999px",
              top: "2px",
              left: "1113px",
              rotate: "0",
              borderRadius: "",
              borderWidth: "1px",
              borderColor: "#000000",
              shadow: "10 10 5 #888888",
              padding: "0px",
              fontSize: "30px",
              fontWeight: "normal",
              maxLines: "2",
              lineHeight: "43.290000000000006px",
              textStyle: "fill",
              textDecoration: "none",
              fontFamily: "",
              textAlign: "left",
            },
          },
          {
            type: "text",
            text: "扫码关注",
            css: {
              color: "#ff0000",
              background: "rgba(0,0,0,0)",
              width: "200px",
              height: "43.89999999999999px",
              top: "2px",
              left: "1113px",
              rotate: "0",
              borderRadius: "",
              borderWidth: "1px",
              borderColor: "#000000",
              shadow: "10 10 5 #888888",
              padding: "0px",
              fontSize: "30px",
              fontWeight: "normal",
              maxLines: "2",
              lineHeight: "43.290000000000006px",
              textStyle: "fill",
              textDecoration: "none",
              fontFamily: "",
              textAlign: "left",
            },
          },
          {
            type: "text",
            text: "扫码关注",
            css: {
              color: "#C87756",
              background: "rgba(0,0,0,0)",
              width: "30px",
              height: "175.10999999999996px",
              top: "787.94px",
              left: "254px",
              rotate: "0",
              borderRadius: "",
              borderWidth: "",
              borderColor: "#000000",
              shadow: "",
              padding: "0px",
              fontSize: "30px",
              fontWeight: "normal",
              maxLines: "5",
              lineHeight: "43.290000000000006px",
              textStyle: "fill",
              textDecoration: "none",
              fontFamily: "",
              textAlign: "left",
            },
          },
          {
            type: "text",
            text: "1. 忌食辛辣刺激食物\n2. 忌运动量过大\n3. 戒烟戒酒，忌暴饮暴食",
            css: {
              color: "#C87756",
              background: "rgba(0,0,0,0)",
              width: "250px",
              height: "93.88px",
              top: "611px",
              left: "40px",
              rotate: "0",
              borderRadius: "",
              borderWidth: "",
              borderColor: "#000000",
              shadow: "",
              padding: "0px",
              fontSize: "20px",
              fontWeight: "normal",
              maxLines: "6",
              lineHeight: "31.080000000000002px",
              textStyle: "fill",
              textDecoration: "none",
              fontFamily: "",
              textAlign: "left",
            },
          },
          {
            type: "text",
            text: "养生小贴士",
            css: {
              color: "#C87756",
              background: "rgba(0,0,0,0)",
              width: "200px",
              height: "42.89999999999999px",
              top: "537px",
              left: "42px",
              rotate: "0",
              borderRadius: "",
              borderWidth: "",
              borderColor: "#C87756",
              shadow: "",
              padding: "0px",
              fontSize: "30px",
              fontWeight: "bold",
              maxLines: "2",
              lineHeight: "43.290000000000006px",
              textStyle: "fill",
              textDecoration: "none",
              fontFamily: "webfontzk",
              textAlign: "left",
            },
          },
          {
            type: "text",
            text: "分",
            css: {
              color: "#C87756",
              background: "rgba(0,0,0,0)",
              width: "130px",
              height: "185.89999999999998px",
              top: "708px",
              left: "484px",
              rotate: "0",
              borderRadius: "",
              borderWidth: "",
              borderColor: "#000000",
              shadow: "",
              padding: "0px",
              fontSize: "130px",
              fontWeight: "normal",
              maxLines: "2",
              lineHeight: "187.59000000000003px",
              textStyle: "fill",
              textDecoration: "none",
              fontFamily: "webfontzkxw",
              textAlign: "left",
            },
          },
          {
            type: "text",
            text: "秋",
            css: {
              color: "#C87756",
              background: "rgba(0,0,0,0)",
              width: "130px",
              height: "185.89999999999998px",
              top: "580px",
              left: "463.5px",
              rotate: "0",
              borderRadius: "",
              borderWidth: "",
              borderColor: "#000000",
              shadow: "",
              padding: "0px",
              fontSize: "130px",
              fontWeight: "normal",
              maxLines: "2",
              lineHeight: "187.59000000000003px",
              textStyle: "fill",
              textDecoration: "none",
              fontFamily: "webfontzkxw",
              textAlign: "left",
            },
          },
          {
            type: "image",
            url: "https://static.fotor.com.cn/assets/res/pic/454d3884-b1d1-4059-a08b-18427f93c8eb.jpg?x-oss-process=image/resize,lfit,h_1200,w_1200/format,src",
            css: {
              width: "568.01px",
              height: "475.27px",
              top: "0px",
              left: "39.19px",
              rotate: "0",
              borderRadius: "",
              borderWidth: "",
              borderColor: "#000000",
              shadow: "",
              mode: "scaleToFill",
            },
          },
          {
            type: "text",
            text: "请朋友们注意防寒保暖，小心着凉",
            css: {
              color: "#fff",
              background: "rgba(0,0,0,0)",
              width: "22px",
              height: "372.9000000000001px",
              top: "61px",
              left: "71px",
              rotate: "0",
              borderRadius: "",
              borderWidth: "",
              borderColor: "#000000",
              shadow: "",
              padding: "0px",
              fontSize: "22px",
              fontWeight: "normal",
              maxLines: "22",
              lineHeight: "24.42px",
              textStyle: "fill",
              textDecoration: "none",
              fontFamily: "",
              textAlign: "left",
            },
          },
        ],
      },
      tempFilePath: "",
    };
  },
  onShow() {
    // 页面访问统计
    // dataStatistics();

    // const _testInput = encrypt('测试加密');
    // console.log(_testInput);

    // const _testInputJm = decrypt(_testInput);
    // console.log(_testInputJm);

    const crypt = new Crypt();
    const email = "xxx@163.com";
    const phone = "15800000000";
    const params = {
      nickname: "测试帐号",
      phone: crypt.aes_encrypt(phone),
      email: crypt.aes_encrypt(email),
      crypt_key: crypt.rsa_key_encrypt(),
    };
    this.$api.test(params, "POST").then(() => {
      console.log("params", JSON.stringify(params));
    });
  },

  		
  methods: {
	  getAllCategoryList() {
	  	this.$api.test({}).then(res => {
	  		console.info("getAllCategoryList______________________");
	  	});
	  },
    onSearch() {
      dataStatistics("click", "前往搜索页面");
      uni.navigateTo({
        url: "/subcontract/home/search/search",
      });
    },
    onImgOk(e) {
      this.tempFilePath = e.detail.path;
    },
    onImgErr() {
      console.log("onImgErr");
    },
    savePoster() {
      const { tempFilePath } = this;
      savePhoneAlbum(tempFilePath);
    },
  },
  onShareAppMessage(res) {
    // 分享统计
    dataStatistics("share");

    return {
      title: "自定义分享标题",
      path: "/pages/center/index?id=123",
    };
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 100rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 28rpx;
  // color: $u-content-color;
}

.link-demo {
  margin-top: 80rpx;
}
</style>
